<template>
	<div class="cmp-myError">
		<div class="cont-title">
			我的错题
		</div>
		<div class="cmp-error-nav">
			<div class="error-nav-item " :class="{'error-nav-active':types == 1}" @click="goExamNoId(1)">
				<div class="error-item-icon">
					<img src="../assets/img/err-type-icon1.png" alt="">
				</div>
				<div class="error-item-info">
					<div class="error-item-name">顺序模式</div>
					<div class="error-item-intro">根据错题先后顺序进行练习</div>
				</div>
			</div>
			<div class="error-nav-item" :class="{'error-nav-active':types == 2}" @click="goExamNoId(2)">
				<div class="error-item-icon">
					<img src="../assets/img/err-type-icon2.png" alt="">
				</div>
				<div class="error-item-info">
					<div class="error-item-name">随机模式</div>
					<div class="error-item-intro">根据所做错题随机抽取进行练习</div>
				</div>
			</div>
			<div class="error-nav-item" :class="{'error-nav-active':types == 3}" @click="goExamNoId(3)">
				<div class="error-item-icon">
					<img src="../assets/img/err-type-icon3.png" alt="">
				</div>
				<div class="error-item-info">
					<div class="error-item-name">高频错题</div>
					<div class="error-item-intro">根据高频错题随机抽取进行练习</div>
				</div>
			</div>
		</div>
		<div class="error-querstion-list">
			<div class="test-item" v-for="item in list">
				<div class="test-intro">
					<div class="test-name">{{item.title}}</div>
					<div class="test-time">
						<span class="time-text">最后一次测试时间：{{item.updateTime}}</span>
						<div class="time-tag">
							<div class="tag-icon">
								<img src="../assets/img/question_icon1.png" alt="">
							</div>
							<span>共{{item.quCountAll}}道</span>
						</div>
						<div class="time-tag">
							<div class="tag-icon">
								<img src="../assets/img/question_icon2.png" alt="">
							</div>
							<span>共{{item.quCountWrong}}道</span>
						</div>
					</div>
				</div>
				<div class="test-btn" @click="goExam(item.recId)">进入订正</div>
			</div>
		</div>
		<div class="page-cont">
			<el-pagination :page-size="pageSize" :hide-on-single-page="true" background layout="prev, pager, next"
				:total="total" @current-change="pageNumChange">
			</el-pagination>
		</div>
	</div>
</template>
<script>
	import {
		getErrorPaperApi,
		getOrderErrorApi,
		getRandomErrorApi,
		getWrongErrorApi,
	} from '@/api/MyError'
	export default {
		data() {
			return {
				types: 1,
				pageSize: 10,
				pageNum: 1,
				list: [],
				total: 0
			}
		},
		created() {
			this.getMyError()
		},
		methods: {
			pageNumChange(index) {
				this.pageNum = index
				this.getMyError()
			},
			getMyError() {
				getErrorPaperApi({
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}).then(res => {
					this.list = res.rows
				})
			},
			goExamNoId(index) {
				if (index == 1) {
					getOrderErrorApi().then(res => {
						let list = res.rows
						this.goExamPage(index, list)
					})
				} else if (index == 2) {
					getRandomErrorApi().then(res => {
						let list = res.rows
						this.goExamPage(index, list)
					})
				} else if (index == 3) {
					getWrongErrorApi().then(res => {
						let list = res.rows
						this.goExamPage(index, list)
					})
				}
				this.types = index


			},
			goExamPage(index, list) {
				if (list && list.length != 0) {
					this.$router.push({
						path: '/ErrorExam',
						query: {
							typs: index
						}
					})
				} else {
					this.$alert('您暂无错题', '提示', {
						confirmButtonText: '确定',
						callback: action => {}
					});
				}


			},
			goExam(id) {
				this.$router.push({
					path: '/ErrorExam',
					query: {
						id: item.recId
					}
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	.cmp-myError {
		padding: 0 60px;

		.cont-title {
			padding: 30px 0 15px;
			border-bottom: 1px solid rgba(151, 151, 151, 0.2);
			font-size: 16px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #000000;
			line-height: 22px;
		}

		.cmp-error-nav {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 17px;
		}

		.error-nav-item {
			display: flex;
			align-items: center;
			padding: 0 13px;
			width: 292px;
			height: 105px;
			background-color: #F4F8FF;
			cursor: pointer;
		}

		.error-nav-active {
			background: linear-gradient(180deg, #4162FF 0%, #35CCFF 100%);

			.error-item-name {
				color: #fff;
			}

			.error-item-intro {
				color: #fff;
			}
		}

		.error-item-icon {
			width: 46px;
			height: 46px;
			border-radius: 46px;
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 11px;

			img {
				width: 28px;
			}
		}

		.error-item-name {
			font-size: 18px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #000000;
			margin-bottom: 11px;
		}

		.error-item-intro {
			font-size: 14px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #000000;
		}

		.test-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30px 0;
			border-bottom: 1px solid rgba(151, 151, 151, 0.2);
		}

		.test-name {
			font-size: 18px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-bottom: 22px;
		}

		.test-time {
			display: flex;
			align-items: center;
			font-size: 12px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #666666;
			line-height: 17px;
		}

		.time-text {
			margin-right: 68px;
		}

		.time-tag {
			display: flex;
			align-items: center;
			margin-left: 18px;
		}

		.tag-icon {
			width: 16px;
			height: 16px;
			margin-right: 4px;
		}

		.test-btn {
			width: 89px;
			height: 34px;
			background: #2360FE;
			border-radius: 17px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 14px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 500;
			color: #FFFFFF;
			cursor: pointer;
		}

		.page-cont {
			padding: 77px 0 74px;
			display: flex;
			justify-content: center;
		}

		.el-pagination.is-background .el-pager li:not(.disabled).active {
			background-color: #2360FE;
		}
	}
</style>